<template>
	<div class="home_view">
		<div class="projectTitle">欢迎使用 {{projectName}}</div>
		<div class="count_list">
			<el-collapse-transition v-if="btnAuth('kehouzuoye','首页总数')">
				<el-card v-show="countTypeList.closekehouzuoyeCountType" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								课后作业
							</div>
							<div class="card_head_right">
								<el-icon @click="countTypeClick('hiddenkehouzuoyeCountType')" class="showIcons"
									:class="countTypeList.hiddenkehouzuoyeCountType?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="countTypeClick('closekehouzuoyeCountType')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
							
						</div>
					</template>
					<el-collapse-transition>
						<div class="count_item" v-show="countTypeList.hiddenkehouzuoyeCountType">
							<div class="count_title">课后作业总数</div>
							<div class="count_num">{{kehouzuoyeCount}}</div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
			<el-collapse-transition v-if="btnAuth('kechengqiandao','首页总数')">
				<el-card v-show="countTypeList.closekechengqiandaoCountType" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								课程签到
							</div>
							<div class="card_head_right">
								<el-icon @click="countTypeClick('hiddenkechengqiandaoCountType')" class="showIcons"
									:class="countTypeList.hiddenkechengqiandaoCountType?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="countTypeClick('closekechengqiandaoCountType')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
							
						</div>
					</template>
					<el-collapse-transition>
						<div class="count_item" v-show="countTypeList.hiddenkechengqiandaoCountType">
							<div class="count_title">课程签到总数</div>
							<div class="count_num">{{kechengqiandaoCount}}</div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
		</div>
		<div class="card_list">
			<el-collapse-transition v-if="btnAuth('kehouzuoye','首页统计')">
				<el-card v-show="cardTypeList.closekehouzuoyeChartType1" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								课后作业
							</div>
							<div class="card_head_right">
								<el-icon @click="cardTypeClick('hiddenkehouzuoyeChartType1')" class="showIcons"
									:class="cardTypeList.hiddenkehouzuoyeChartType1?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="cardTypeClick('closekehouzuoyeChartType1')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
						</div>
					</template>
					<el-collapse-transition>
						<div class="card_item" v-show="cardTypeList.hiddenkehouzuoyeChartType1">
							<div id="kehouzuoyekechengmingchengEchart1" style="width: 100%;height: 400px;"></div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
			<el-collapse-transition v-if="btnAuth('kechengqiandao','首页统计')">
				<el-card v-show="cardTypeList.closekechengqiandaoChartType1" class="card_view">
					<template #header>
						<div class="index_card_head">
							<div class="card_head_title">
								课程签到
							</div>
							<div class="card_head_right">
								<el-icon @click="cardTypeClick('hiddenkechengqiandaoChartType1')" class="showIcons"
									:class="cardTypeList.hiddenkechengqiandaoChartType1?'showIcons1':''">
									<ArrowUpBold />
								</el-icon>
								<el-icon @click="cardTypeClick('closekechengqiandaoChartType1')" class="closeIcons">
									<CloseBold />
								</el-icon>
							</div>
						</div>
					</template>
					<el-collapse-transition>
						<div class="card_item" v-show="cardTypeList.hiddenkechengqiandaoChartType1">
							<div id="kechengqiandaokechengmingchengEchart1" style="width: 100%;height: 400px;"></div>
						</div>
					</el-collapse-transition>
				</el-card>
			</el-collapse-transition>
		</div>
	</div>
</template>

<script setup>
	import {
		inject,
		nextTick,
		ref,
		getCurrentInstance
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const projectName = context.$project.projectName
	const countTypeList = ref({
	})
	const getCountList=()=>{
		countTypeList.value.closekehouzuoyeCountType = true
		countTypeList.value.hiddenkehouzuoyeCountType = true
		if(btnAuth('kehouzuoye','首页总数')){
			getkehouzuoyeCount()
		}
		countTypeList.value.closekechengqiandaoCountType = true
		countTypeList.value.hiddenkechengqiandaoCountType = true
		if(btnAuth('kechengqiandao','首页总数')){
			getkechengqiandaoCount()
		}
	}
	const kehouzuoyeCount = ref(0)
	const getkehouzuoyeCount = () => {
		context?.$http({
			url:'kehouzuoye/count',
			method: 'get'
		}).then(res=>{
			kehouzuoyeCount.value = res.data.data
		})
	}
	const kechengqiandaoCount = ref(0)
	const getkechengqiandaoCount = () => {
		context?.$http({
			url:'kechengqiandao/count',
			method: 'get'
		}).then(res=>{
			kechengqiandaoCount.value = res.data.data
		})
	}
	const countTypeClick = (e) => {
		countTypeList.value[e] = !countTypeList.value[e]
	}
	const init=()=>{
		getCountList()
		getCardList()
	}
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	let echarts = inject("echarts")
	const cardTypeClick = (e) =>{
		cardTypeList.value[e] = !cardTypeList.value[e]
		setTimeout(()=>{
			getCardList()
		},1000)
	}
	const cardTypeList = ref({
		closekehouzuoyeChartType1: true,
		hiddenkehouzuoyeChartType1: true,
		closekechengqiandaoChartType1: true,
		hiddenkechengqiandaoChartType1: true,
	})
	const getCardList = () => {
		if(btnAuth('kehouzuoye','首页统计')){
			getkehouzuoyeChart1()
		}
		if(btnAuth('kechengqiandao','首页统计')){
			getkechengqiandaoChart1()
		}
	}
	const getkehouzuoyeChart1 = () => {
		nextTick(()=>{
			var kechengmingchengEchart1 = echarts.init(document.getElementById("kehouzuoyekechengmingchengEchart1"),'macarons');
			context?.$http({
				url: "kehouzuoye/group/kechengmingcheng",
				method: "get",
			}).then(obj=>{
				let res = obj.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<res.length;i++){
				    xAxis.push(res[i].kechengmingcheng);
				    yAxis.push(parseFloat((res[i].total)));
				    pArray.push({
				        value: parseFloat((res[i].total)),
				        name: res[i].kechengmingcheng
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '作业完成统计',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: pArray,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
				kechengmingchengEchart1.clear()
				// 使用刚指定的配置项和数据显示图表。
				kechengmingchengEchart1.setOption(option);
				//根据窗口的大小变动图表
				kechengmingchengEchart1.resize();
			})
		})
	}
	const getkechengqiandaoChart1 = () => {
		nextTick(()=>{
			var kechengmingchengEchart1 = echarts.init(document.getElementById("kechengqiandaokechengmingchengEchart1"),'macarons');
			context?.$http({
				url: "kechengqiandao/group/kechengmingcheng",
				method: "get",
			}).then(obj=>{
				let res = obj.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<res.length;i++){
				    xAxis.push(res[i].kechengmingcheng);
				    yAxis.push(parseFloat((res[i].total)));
				    pArray.push({
				        value: parseFloat((res[i].total)),
				        name: res[i].kechengmingcheng
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '课程签到统计',
                        left: 'center'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: pArray,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
				kechengmingchengEchart1.clear()
				// 使用刚指定的配置项和数据显示图表。
				kechengmingchengEchart1.setOption(option);
				//根据窗口的大小变动图表
				kechengmingchengEchart1.resize();
			})
		})
	}
	init()
</script>
<style lang="scss">
	.projectTitle{
		padding: 20px 0;
		margin: 20px 0 20px;
		font-weight: bold;
		display: flex;
		width: 100%;
		font-size: 24px;
		justify-content: center;
		align-items: center;
		height: auto;
	}

	.showIcons {
		transition: transform 0.3s;
		margin-right: 10px;
	}

	.showIcons1 {
		transform: rotate(-180deg);
	}
	
	// 总数盒子
	.count_list{
		padding: 0 0 20px;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		// 总数card
		.card_view {
			border: 1px solid #19a97b30;
			border-radius: 0;
			box-shadow: 0px 0px 0px rgba(0,0,0,.12);
			margin: 0 1% 20px;
			width: 48%;
			box-sizing: border-box;
			height: auto;
			// card头部
			.el-card__header {
				border: 0px solid #19a97b30;
				background: #19a97b10;
				width: 100%;
				border-width: 0 0 1px;
				// 头部盒子
				.index_card_head {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					height: 10px;
					// 标题
					.card_head_title {
						color: #666;
						font-size: 14px;
					}
					// 按钮盒子
					.card_head_right {
						display: flex;
						align-items: center;
						// 按钮
						.el-icon {
							cursor: pointer;
							color: #aaa;
							font-size: 20px;
						}
					}
				}
			}
			// body
			.el-card__body {
				padding: 0;
				// body盒子
				.count_item{
					padding: 30px;
					text-align: center;
					// 总数标题
					.count_title{
						color: #333;
						font-size: 16px;
						line-height: 2;
					}
					// 总数数字
					.count_num{
						color: #c00;
						font-size: 30px;
						line-height: 2;
					}
				}
			}
		}
	}
	// 首页盒子
	.home_view {
		padding: 0px 20px;
		margin: 0;
		background: url(http://clfile.zggen.cn/20240203/09a98f4852104a599055d47953ef0a23.png) no-repeat center top / 100% 100% !important;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}
	// 统计图盒子
	.card_list {
		padding: 0 0 20px;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		// 统计图card
		.card_view {
			border: 1px solid #19a97b30;
			border-radius: 0;
			box-shadow: 0px 0px 0px rgba(0,0,0,.12);
			margin: 0 1% 30px;
			width: 100%;
			box-sizing: border-box;
			height: auto;
			// 头部
			.el-card__header {
				border: 0px solid #19a97b30;
				background: #19a97b10;
				width: 100%;
				border-width: 0 0 1px;
				// 头部盒子
				.index_card_head {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					height: 10px;
					// 标题
					.card_head_title {
						color: #f00;
						font-size: 14px;
					}
					// 按钮盒子
					.card_head_right {
						display: flex;
						align-items: center;
						// 按钮
						.el-icon{
							cursor: pointer;
							color: #aaa;
							font-size: 20px;
						}
					}
				}
			}
			// body
			.el-card__body {
				padding: 0;
				// body盒子
				.card_item{
					padding: 30px;
					text-align: center;
				}
			}
		}
	}
</style>
